<template>
  <el-pagination
    v-model:current-page="currentPage"
    v-model:page-size="curPageSize"
    background
    layout="total,sizes,prev, pager, next"
    :total="props.total"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
</template>
<script lang="ts" setup>
import { ref, reactive } from "vue";
const emits = defineEmits(["sizeChange", "currentChange"]);

// interface Props {
//   total: number;
//   // pageSizeList?: Array<number>;
// }
// const props = withDefaults(defineProps<Props>(), {});

const props = defineProps({
  total: Number
});

const currentPage = ref(1);
const curPageSize = ref(20);
function handleSizeChange(val) {
  // console.log("handleSizeChange val:", handleSizeChange);
  // console.log("curPageSize:", curPageSize);
  emits("sizeChange", val);
}
function handleCurrentChange(val) {
  // console.log("handleCurrentChange val:", val);

  // console.log("currentPage:", currentPage);

  emits("currentChange", val);
}

defineExpose({
  currentPage,
  curPageSize
});
</script>
